<template>
	<uni-nav-bar title="新建团惠包" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<Process :state="'1'"></Process>
	<view class="package" style="padding: 30rpx 20rpx;">
		<view class="addGroup" style="padding-bottom: 15rpx;border-bottom: 1px solid #eee;">
			<text>团惠包名称</text>
			<input type="text" v-model="title" placeholder="请输入团惠包" @blur="groupText">
		</view>
		<view class="addGroup" style="margin-top: 15rpx;">
			<text>说明</text>
			<textarea @blur="bindTextAreaBlur" auto-height :placeholder="des?des:'请输入理由'" />
		</view>
	</view>
	<view class="package" style="padding:20rpx 0px" >
		<view v-for="(item,index) in groupList" :key='item.id'>
			<view class="space-between shopTop">
				<view class="packageLsit" @click="navTo('shopp/Shopkeeper?id='+item.store_id)">
					<image src="../../static/groupBenefits/shop.png" mode=""></image>
					<text>{{item.store_name}}</text>
					<uni-icons type="forward" size="19" color="#666"></uni-icons>
				</view>
				<uni-icons type="trash" size="22" @click="delShop(item.id)"></uni-icons>
			</view>
			<ShopList :type="'subsidy'" :shoppAll="item" :show="true" :jump="'group'"></ShopList>
		</view>
		<view class="column edior" style="padding: 30rpx 20rpx;" @click="redirectTo('shopp/classifi')"
			v-if="groupList.length<3">
			<view>
				<image src="../../static/groupBenefits/add.png" mode=""></image>
				<text>您还需添加{{addNums}}件商品可享团惠价</text>
			</view>
			<view v-if="groupList.length<1">您的团惠包空空如也快去商城添加商品吧</view>
		</view>
		<view class="center price" style="padding: 0px 20rpx;box-sizing: border-box;">
			 <view style="margin-right: 15rpx;">总价</view>
			 <view><text>¥</text><text>{{addNums==0?prices.total_money:'--'}}</text></view>
		</view>
	</view>
	
	<view class="package">
		<view class="title">车友团等级越高补贴越多</view>
		<TeamPrice :priceList="priceAll" :addNums="addNums"></TeamPrice>
		<view class="firstGroup" v-if="prices.team_id&&prices.team_cha_nums==0">
			<text>按照</text>
			<text>{{prices.team_name}}</text>
			<text>享受平台补贴团惠价</text>
			<image :src="Prompt1" mode="" @click="openRiders()"></image>
		</view>
		<view class="NewGroup" v-if="!prices.team_id">您当前没有加入车友团,无法享受平台补贴,您可以去<text @click="navTo('team/newTeam')">创建车友团</text></view>
		<view class="NewGroup" v-if="prices.team_id&&prices.team_cha_nums!=0">您创建的车友团尚未成团,无法享受平台补贴，您可以去
			<text @click="navTo('team/invitation?id='+prices.team_id+'&type='+'team')">邀请好友</text>
		</view>
	</view>
	<ShopBot 
	@submit="submit"
	:share="''" 
	:money="priceFor" 
	:totalMoney="prices.total_money"
	:yhPrice="prices.yh_money"
	:title="title"
	:des="des"
	:empty="empty" 
	:addNums="addNums" 
	:state="'edit'"
	:text="'应付'">
	</ShopBot>
	<!-- 车友团信息弹框 -->
	<uni-popup ref="ridersPopup" type="center">
	<Riders :image="prices.team_level_image" :name="prices.team_name"></Riders>
	</uni-popup>
</template>

<script setup lang="ts">
import { navBack, navTo,redirectTo } from '@/utils/navigator';
import Process from '@c/groupBenefits/process.vue';
import Riders from '@c/groupBenefits/riders.vue';
import ShopList from '@c/groupBenefits/shopGrid.vue';
import TeamPrice from '@c/groupBenefits/teamPrice.vue';
import ShopBot from '@c/groupBenefits/DetailBot.vue';
import { Prompt1 } from '@/utils/Static';
import { onShow, onHide } from '@dcloudio/uni-app';
import { errorToast, successToast, showLoading } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { cartTeam, PriceTeam, numsTeam } from '@/gql/group';
import { ref, Ref } from 'vue';
import { getDriverID } from '@/stores/driverID';
const driver_id = getDriverID();
const title = ref('');
const des = ref('');
const groupList = ref([]);
const priceAll = ref([]);
const addNums = ref();
const prices: Ref<any> = ref({});
const priceFor = ref();
const ridersPopup = ref(null);
const empty = ref(false);
const repeat = ref(true); //放重复点击
onShow(() => {
  des.value = uni.getStorageSync('detail');
  init();
  priceList();
  groupMuch();
});

function init() {
  const payload = {
    query: cartTeam,
    variables: {
      user_id: driver_id,
    },
  };
  toPublish('ql/store/getCartTeamList', payload, (obj: any) => {
    const { cart_team } = obj.data;
    groupList.value = cart_team;
    priceList();
  });
}

function priceList() {
  const payload = {
    query: PriceTeam,
    variables: {
      driver_id,
    },
  };
  toPublish('ql/store/getCartGoodsPrice', payload, (obj: any) => {
    const { cart_goods_price } = obj.data;
    priceAll.value = cart_goods_price.list;
    prices.value = cart_goods_price;
    priceFor.value = groupList.value.length > 2 ? cart_goods_price.money : cart_goods_price.total_money;
    title.value = uni.getStorageSync('Texmtitle') ? uni.getStorageSync('Texmtitle') : cart_goods_price.title;
    des.value = uni.getStorageSync('detail') ? uni.getStorageSync('detail') : cart_goods_price.des;
    if (cart_goods_price.team_id && cart_goods_price.team_cha_nums == 0 && groupList.value.length > 2) {
      empty.value = true;
    }
  });
}

function groupMuch() {
  const payload = {
    query: numsTeam,
    variables: {
      user_id: driver_id,
    },
  };
  toPublish('ql/store/getCartShoppingNums', payload, (obj: any) => {
    const { team_shopping_nums } = obj.data;
    addNums.value = team_shopping_nums.add_nums;
  });
}

function delShop(id) {
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    id: Number(id),
  };
  toPublish('store/delCartTeam', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true;
      groupMuch();
      init();
      successToast(msg);
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}

function bindTextAreaBlur(e) {
  console.log(e.detail.value);
  if (e.detail.value) {
    des.value = e.detail.value;
    uni.setStorageSync('detail', des.value);
  }
}

function groupText(e) {
  console.log(e.detail.value);
  if (e.detail.value) {
    title.value = e.detail.value;
    uni.setStorageSync('Texmtitle', title.value);
  }
}

function submit() {
  init();
  groupMuch();
}
/**
 * 车友团信息弹框
 */
function openRiders() {
  ridersPopup.value.open();
}
onHide(() => {
  uni.removeStorageSync('type');
});
</script>

<style scoped lang="less">
@import url('../groupBenefits/less/groupEditor.less');
</style>
